<template>
    <el-container>
        <el-aside width="200px">
          <div class="aside-title">十方智育</div>
            <el-menu router :default-active="$route.path" background-color="#545c64" text-color="#fff"
                active-text-color="#ffd04b">

              <el-sub-menu index="4">
                <template #title>
                  <span>内容管理</span>
                </template>
                <el-menu-item index="/consultant/article">
                  文章管理
                </el-menu-item>
                <el-menu-item index="/consultant/psychologicalknowledgemanagement">
                  心理知识管理
                </el-menu-item>
                <el-menu-item index="/consultant/fmmanagement">
                  FM管理
                </el-menu-item>
                <el-menu-item index="/consultant/consultantmanagement">
                  心理测试管理
                </el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="5">
                <template #title>
                  <span>心理答疑管理</span>
                </template>
                <el-menu-item index="/consultant/question">
                  问题管理
                </el-menu-item>

              </el-sub-menu>
              <el-sub-menu index="6">
                <template #title>
                  <span>咨询预约管理</span>
                </template>
                <el-menu-item index="/consultant/consultationappointment">
                  咨询预约管理
                </el-menu-item>
                <el-menu-item index="/consultant/consultationreply">
                  咨询回复管理
                </el-menu-item>
                <el-menu-item index="/consultant/userreviews">
                  用户评价管理
                </el-menu-item>
              </el-sub-menu>

              <el-menu-item index="/consultant/my">
                <span>个人中心</span>
              </el-menu-item>

            </el-menu>
        </el-aside>

        <el-container>
          <el-header style="display: flex; justify-content: center; align-items: center; background-color: aquamarine; position: relative;">
            <span style="position: absolute; left: 50%; transform: translateX(-50%);">咨询师系统界面</span>
            <el-button type="info" @click="logOff" style="margin-left: auto;">退出</el-button>
          </el-header>

          <el-main>
                <router-view />

            </el-main>

        </el-container>
    </el-container>
</template>

<script setup>
import router from "../../router/index.js";

const logOff = () => {
    localStorage.removeItem('token')
    router.push('/login')
}
</script>

<style scoped>
.el-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
.aside-title {
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.el-aside {
    background-color: #545c64;
    height: 100vh;
}

.el-main {
    padding: 20px;
}
</style>
